<template>
	<div>
		<div class="textTile flex-h">
		
			<span class="sp1 flex1">MBTI性格测试</span>
			<span class="sp2"><b>{{tabNum+1}}</b><i>/20</i></span>
		</div>
		<div v-for="(item,index) in dyznData.history" :key="index">
			<div class="textQuestions" v-show="index===tabNum">
				<span>{{item.issue}}</span>
			</div>


			<div class="commonBox has-bottombar grown" v-show="index===tabNum">
				<span class="sp1" @click="clcyes(index,item.answer1)">{{item.answer1.ans}}</span>
				<span class="sp1" @click="clcyes(index,item.answer2)">{{item.answer2.ans}}</span>

			</div>
		</div>


	</div>
</template>

<script>
	import ls from 'store2';

	import dyznData from '~/static/json/mbti.json'
	export default {
		props: {
			// 			message: String,
			// 			col: String
		},
		components: {

		},
		data() {
			return {
			// ESJTINPF
				tabNum: 0,
				dyznData: dyznData,
				mbtiScore: [{
					typr: "E",
					count: 0
				}, {
					typr: "I",
					count: 0
				}, {
					typr: "S",
					count: 0
				}, {
					typr: "N",
					count: 0
				}, {
					typr: "J",
					count: 0
				}, {
					typr: "P",
					count: 0
				}, {
					typr: "T",
					count: 0
				}, {
					typr: "F",
					count: 0
				}],
				grownBigScore: [0, 0, 0]
			};
		},
		computed: {

		},
		mounted: function() {
		
		},
		methods: {
			// ESJTINPF
			clcyes(indexs, stats) {
		
				switch (stats.type) {
					case 'E':
						this.mbtiScore[0].count += 1
						break;
					case 'I':
						this.mbtiScore[1].count += 1
						break;
					case 'S':
					
						this.mbtiScore[2].count += 1
						break;
					case 'N':
					
						this.mbtiScore[3].count += 1
						break;
					case 'J':

						this.mbtiScore[4].count += 1
						break;
					case 'P':

						this.mbtiScore[5].count += 1
						break;
					case 'T':

						this.mbtiScore[6].count += 1
						break;
					case 'F':

						this.mbtiScore[7].count += 1
						break;
					default:
			
				}
	
				if (this.tabNum === 19) {
					this.$loading('open')
					let obj = {
						status: 3,
						worthScore: this.mbtiScore,

					}
					ls.set('resultPar', obj)			
					this.commonJs.gosto('IndResult')				
				} else {
					this.tabNum = indexs + 1;
				}


		
			},


		
		}
	};
</script>


<style scoped lang="less">
	.textTile {
		padding-bottom: 0.4rem;
		height: auto;
		width: 100%;
		border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
	
		.sp1 {
			font-size: 0.4rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.44rem;
		}
	
		.sp2 {
			b {
				font-size: 0.4rem;
				font-weight: bold;
				color: @mainColor;
			}
	
			i {
				font-size: 0.22rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);
				// line-height:30px;
			}
		}
	}
	.textQuestions {
		width: 100%;
		height: auto;
		padding-top: 0.3rem;

		span {
			font-size: 0.32rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.45rem;
		}
	}

	.titlesDrag {
		width: 100%;
		height: 0.8rem;
		margin-top: 0.5rem;

		.sp1,
		.sp2 {
			font-size: 0.26rem;
			font-weight: bold;
			box-sizing: border-box;
			height: 0.8rem;
		}

		.sp1 {
			width: 1.5rem;
			padding-top: 0.4rem;
			color:@mainColor;

		}

		.sp2 {
			padding-top: 0.2rem;

			color: rgba(187, 187, 187, 1);

		}
	}

	.titlesDrag1 {
		height: 0.4rem;
		margin-top: 0;
		font-size: 0.3rem;

		.sp1,
		.sp2 {
			height: 0.4rem;
			padding-top: 0;
			color: rgba(187, 187, 187, 1);
		}
	}

	.commonBox {
		position: absolute;
		width: 100%;
		height: auto;
		left: 0;
		bottom: 0.4rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}

	.grown {
		.sp1 {
			width: 6.2rem;
			height: auto;
			border-radius: 0.1rem;
			padding: 0.2rem;
			border: 0.02rem solid rgba(238, 238, 238, 1);
			font-size: 0.3rem;
			display: block;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.4rem;
			text-align: left;
			box-sizing: border-box;
			margin-top: 0.15rem;
		}

		.sp3 {
			width: 6.1rem;
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid @mainColor;
			margin: 0 auto;
			display: block;
			line-height: 0.9rem;
			text-align: center;
			font-size: 0.3rem;
			font-weight: bold;
			color: @mainColor;
		}

		span:nth-of-type(1) {
			margin-right: 0.2rem;
		}
	}
</style>
